<template>
  <div id="cart-total">
    <div class="account-info">
      <label for="">
        <input
          type="checkbox"
          name=""
          id=""
          :checked="checkedAllFlag"
          @change="checkAll"
        />
        全选
      </label>
      <span class="total-price">{{ totalPrice }}</span>
    </div>
    <div class="account-btn">{{ checkedNum }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    totalPrice() {
      const temp = this.$store.getters.cartListChecked

      let total = 0
      temp.forEach((element) => {
        total += element.price * element.count
      })

      return '合计：￥' + total.toFixed(2)
    },
    checkedNum() {
      const temp = this.$store.getters.cartListChecked
      return '去支付（' + temp.length + '）'
    },
    checkedAllFlag() {
      let flag = false
      // 判断购物车商品的数量和已选中商品的数量，如果相等，那么表示全选了
      if (
        this.$store.getters.cartListLength ===
        this.$store.getters.cartListChecked.length
      ) {
        flag = true
      }
      return flag
    },
  },
  methods: {
    checkAll(e) {
      const flag = e.target.checked
      this.$store.commit('changeCartListAllStatus', flag)
    },
  },
}
</script>
<style lang="less" scoped>
#cart-total {
  position: relative;
  height: 44px;
  background-color: #eeeeee;
  display: flex;

  .account-info {
    flex: 3;
    padding-left: 10px;
    line-height: 44px;
    span {
      display: inline-block;
      padding-left: 15px;
      font-size: 16px;
    }
  }
  .total-price {
    font-weight: bold;
    color: @base-color;
  }
  .account-btn {
    flex: 1;
    background-color: @base-color;
    line-height: 44px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
  }
}
</style>
